<template>
	<view :data-theme="theme">
		<form @submit="formSubmit" report-submit='true'>
			<view class='personal-data pad30'>
				<view class='list borRadius14'>
					<view class="item acea-row row-between-wrapper">
						<view>用户头像</view>
						<button class="pictrue" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image :src='userInfo.avatar'></image>
							<image :src='editPng' class="alter"></image>
						</button>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>用户昵称</view>
						<view class='input'>
							<input type='nickname' name="nickname" v-model='userInfo.nickname' placeholder="输入昵称"
								maxlength="20" />
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>性别</view>
						<view class="input">
							<uni-data-select v-model="userInfo.sex" input-class="input" :localdata="sexList"
								placeholder="选择性别"></uni-data-select>
						</view>
					</view>

					<view class='item acea-row row-between-wrapper'>
						<view>年龄</view>
						<view class='input'>
							<input type='number' name='age' v-model='userInfo.age' placeholder="输入年龄" maxlength="20" />
						</view>
					</view>


					<view class='item acea-row row-between-wrapper' @click="openRole">
						<view>角色信息</view>
						<view class="input">
							<view class="input">
								<block v-if="currentRole && currentRole.status != 1">
									<text>{{currentRole.remark}}</text>
									<text v-if="currentRole.status == 0" class="uni-ml-4 basic-label ea39">审核中</text>
									<text v-if="currentRole.status == 2" class="uni-ml-4 basic-label ea39">已拒绝</text>
								</block>
								<block v-else>
									<text>{{userInfo.roleName}}</text>
								</block>
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</view>
					</view>


					<view class='item acea-row row-between-wrapper' @click="openLocation">
						<view>地址信息</view>
						<view class="input">
							<view class="input">
								{{userInfo.country}}
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</view>
					</view>

				</view>
			</view>
			
			<button class='modify_bottom bg_color' @click="recordInfo">变更记录</button>
			<button class='modifyBnt bg_color' formType="submit">保存资料</button>
		</form>
		
		<picker-data ref="picker" title="选择角色" :picker="localData" label="roleName" v-if="pickerShow"
			@sure="sureData"></picker-data>
	</view>
</template>

<script>
	import {
		userEdit,
		getLogout,
		getUserInfo,
		getRole,
		getEvaInfo
	} from '@/api/user.js';
	import {
		uploadFiles
	} from "@/utils/index.js"
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		Debounce
	} from '@/utils/validate.js'
	let app = getApp();
	import pickerData from "@/components/pickerData/index"
	export default {
		components: {
			pickerData
		},
		data() {
			return {
				localData: [],
				sexList: [{
						value: 1,
						text: '男'
					},
					{
						value: 2,
						text: '女'
					}
				],
				currentRole: null,
				pickerShow: false,
				userInfo: {},
				loginType: 'h5', //app.globalData.loginType
				userIndex: 0,
				newAvatar: '',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				wechat: false,
				theme: app.globalData.theme,
				editPng: 'https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/alert1.png'
			};
		},
		computed: mapGetters(['isLogin', 'uid']),
		onLoad() {
			if (!this.isLogin) {
				toLogin();
			}
			switch (this.theme) {
				case 'theme2':
					this.editPng = 'https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/alert2.png'
					break;
				case 'theme3':
					this.editPng = 'https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/alert3.png'
					break;
				case 'theme4':
					this.editPng = 'https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/alert4.png'
					break;
				case 'theme5':
					this.editPng = 'https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/alert5.png'
					break;
				default:
					this.editPng = 'https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/alert1.png'
					break;
			}
			this.getUser();
			this.getRoleInfo();
			this.getEva();
		},
		methods: {

			recordInfo() {
				uni.navigateTo({
					url: "/pages/summer/applyRecord/applyRecord"
				})
			},

			sureData(e) {
				this.userInfo.roleName = e.roleName;
				this.userInfo.roleRequestId = e.id;
			},

			getRoleInfo() {
				getRole().then(res => {
					this.localData = res.data.filter(item => item.id > 5);
					this.localData.unshift({
						id: 0,
						roleName: "家长"
					})
				})
			},

			getEva() {
				//获取正在审核的信息
				let that = this;
				getEvaInfo().then(res => {
					if (res.data) {
						this.currentRole = res.data;
					}
				})
			},

			/**
			 * 获取个人用户信息
			 */
			getUser: function() {
				let that = this;
				getUserInfo().then(res => {
					uni.hideLoading();
					that.$store.commit("UPDATE_USERINFO", res.data);
					that.userInfo = res.data;
					if (that.m_empty(res.data.avatar)) {
						that.userInfo.avatar =
							"https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/default.png";
					}
				});
			},

			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.m_show("上传中");
				uploadFiles(avatarUrl).then(res => {
					this.userInfo.avatar = res;
					this.m_hide();
				})
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/**
			 * 小程序设置
			 */
			Setting: function() {
				uni.openSetting({
					success: function(res) {
						console.log(res.authSetting)
					}
				});
			},

			openRole() {
				this.pickerShow = true;
				this.$nextTick(() => {
					this.$refs.picker.show();
				})
			},

			openLocation() {
				let that = this;
				console.log("uni.chooseLocation");
				uni.chooseLocation({
					success: function(res) {
						//详细地址
						that.userInfo.country = res.address
						that.userInfo.longitude = res.longitude
						that.userInfo.latitude = res.latitude
						console.log(res);
					},
					fail: function(err) {
						console.log(err);
					}
				});
			},
			/**
			 * 提交修改
			 */
			formSubmit: Debounce(function({
				detail
			}) {
				let that = this;
				if (detail.value) {
					if (detail.value.nickname) {
						this.userInfo.nickname = detail.value.nickname;
					}
				}
				this.m_show("提交中");
				userEdit(this.userInfo).then(res => {
					that.$store.commit("changInfo", {
						amount1: 'avatar',
						amount2: that.userInfo.avatar
					});
					return that.$util.Tips({
						title: '保存成功',
						icon: 'success'
					}, {
						tab: 3,
						url: 1
					});
				}).catch(msg => {
					return that.$util.Tips({
						title: msg || '保存失败，您并没有修改'
					}, {
						tab: 3,
						url: 1
					});
				});
			})
		}
	}
</script>

<style scoped lang="scss">
	.personal-data .wrapper {
		margin: 10rpx 0;
		background-color: #fff;
		padding: 36rpx 30rpx 13rpx 30rpx;
	}

	.personal-data .wrapper .title {
		margin-bottom: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item {
		width: 690rpx;
		height: 160rpx;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		margin-bottom: 22rpx;
		padding: 0 30rpx;
		position: relative;
		border: 2rpx solid #f8f8f8;
		box-sizing: border-box;
	}

	.personal-data .wrapper .wrapList .item.on {
		border-color: $theme-color;
		border-radius: 20rpx;
		background-image: url("");
		background-size: 100% 100%;
		background-color: #fff9f9;
		background-repeat: no-repeat;
	}

	.personal-data .wrapper .wrapList .item .picTxt {
		width: 445rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue {
		width: 96rpx;
		height: 96rpx;
		position: relative;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue .alter {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text {
		width: 325rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .name {
		width: 100%;
		font-size: 30rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .phone {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.personal-data .wrapper .wrapList .item .bnt {
		font-size: 24rpx;
		background-color: #fff;
		border-radius: 27rpx;
		width: 140rpx;
		height: 54rpx;
		border: 2rpx solid $theme-color;
	}

	.personal-data .wrapper .wrapList .item .currentBnt {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 26rpx;
		background-color: rgba(233, 51, 35, 0.1);
		width: 140rpx;
		height: 48rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	.personal-data .list {
		margin-top: 30rpx;
		background-color: #fff;
	}

	.personal-data .list .item {
		border-bottom: 1rpx solid #f2f2f2;
		padding: 24rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .list .item .phone {
		width: 160rpx;
		height: 56rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 56rpx;
		border-radius: 32rpx
	}

	.personal-data .list .item .pictrue {
		width: 88rpx;
		height: 88rpx;
		position: relative;
	}

	.personal-data .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .list .item .pictrue .alter {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.personal-data .list .item .input {
		width: 415rpx;
		text-align: right;
		color: #868686;
	}

	.personal-data .list .item .input .id {
		width: 365rpx;
	}

	.personal-data .list .item .input .iconfont {
		font-size: 35rpx;
	}
	
	.modify_bottom{
		font-size: 32rpx;
		color: #fff;
		left: 50rpx;
		right: 50rpx;
		height: 90rpx;
		border-radius: 20rpx;
		text-align: center;
		line-height: 90rpx;
		position: absolute;
		bottom: 160rpx;
	}
	
	.modifyBnt {
		font-size: 32rpx;
		color: #fff;
		left: 50rpx;
		right: 50rpx;
		height: 90rpx;
		border-radius: 20rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
		position: absolute;
		bottom: 50rpx;
	}

	.bg_color {
		background-color: #007E51;
	}

	.personal-data .logOut {
		font-size: 32rpx;
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		border-radius: 45rpx;
		margin: 30rpx auto 0 auto;
	}
</style>